const ball = document.querySelector('.ball');
const draw = (progress) => {
    ball.style.transform = `translate(${progress}px,0)`
}

function animate({easing, draw, duration}) {
    let start = performance.now();
    return new Promise(resolve => {
        requestAnimationFrame(function animate(time) {
            let timeFraction = (time - start) / duration;
            if (timeFraction > 1) timeFraction = 1;
            let progress = easing(timeFraction)
            draw(progress);
            if (timeFraction < 1) {
                requestAnimationFrame(animate);
            } else resolve();
        });
    });
}

//沿着x轴匀速运动
animate({
    duration: 1000, easing(timeFraction) {
        return timeFraction * 100;
    }, draw
});